<template>
  <div class="box">
<ul class="list">
  <li>
    <p class="littleTit">月销售金额（元）</p>
    <p class="bigTit">120,000</p>
    <p class="lv">
      <span>周同比12％</span>
      <span>日环比12％</span>
    </p>
  </li>
  <li>
    <p class="littleTit">月回款金额（元）</p>
    <p class="bigTit">100000</p>
    <River></River>
  </li>
  <li>
    <p class="littleTit">本月成交订单</p>
    <p class="bigTit">1,000</p>
    <Histogram></Histogram>
  </li>
  <li class="aaa">
    
      <p class="littleTit">完成销售目标</p>
    <p class="bigTit">75%</p>
<Pie></Pie>
  </li>
  <li>
    <p class="littleTit">回款达成率</p>
    <p class="bigTit" id="asd">80%</p>
    <div class="demo-progress">
    <el-progress :percentage="80"  stroke-width="16"  />
  </div>
  </li>
</ul>


<div class="iconfont_list">
<div class="iconfont_list_top">
  <span class="iconfont_name">业绩目标</span>
</div>
<ul>
  <li>
    <span class="iconfont">&#xe639;</span>
    <p class="Ads">新建客户</p>
  </li>
  <li>
    <span class="iconfont">&#xe501;</span>
    <p class="Ads">新建线索</p>
  </li>
  <li>
    <span class="iconfont">&#xe601;</span>
    <p class="Ads">新建商机</p>
  </li>
  <li>
    <span class="iconfont">&#xe668;</span>
    <p class="Ads">新建订单</p>
  </li>
  <li>
    <span class="iconfont">&#xe6b6;
</span>
    <p class="Ads">新建联系人</p>
  </li>
  <li>
    <span class="iconfont">&#xe6ae;</span>
    <p class="Ads">写新跟新</p>
  </li>
  <li>
    <span class="iconfont">&#xe697;</span>
    <p class="Ads">新建任务</p>
  </li>
  <li>
    <span class="iconfont">&#xe61d;</span>
    <p class="Ads">新建工单</p>
  </li>
  <li>
    <span class="iconfont">&#xe639;</span>
    <p class="Ads">新建回款单</p>
  </li>
  <li>
    <span class="iconfont">&#xe639;</span>
    <p class="Ads">回款计划</p>
  </li>
</ul>
</div>

<div class="big_box">


  <div class="Performance_targets">
  <div class="echarts_top">
    <span class="echarts_name">数据简报</span>
   <div class="select_options">
    <el-select
      v-model="value7"
      placeholder="公司简报"
      style="width: 160px;height: 30px"
    >
      <el-option
        v-for="item in options"
        :key="item.value"
        :label="item.label"
        :value="item.value"
        style="width: 160px;height:20px"
      />
    </el-select>
    
    <el-select
      v-model="value8"
      placeholder="本周"
      style="width: 160px;height: 30px"
     
    >
      <el-option
        v-for="item in options"
        :key="item.value"
        :label="item.label"
        :value="item.value"
        style="width: 160px;height:20px"
      />
    </el-select>
   
   </div>

 
 
  </div>
  <ul class="data_list">
    <li>
      <p>新增客户</p>
      <h3>200</h3>
    </li>
    <li>
      <p>新增线索</p>
      <h3>200</h3>
    </li>
    <li>
      <p>新增商机</p>
      <h3>200</h3>
    </li>
    <li>
      <p>新增订单</p>
      <h3>200</h3>
    </li>
    <li>
      <p>新增联系人</p>
      <h3>200</h3>
    </li>
    <li>
      <p>跟进次数</p>
      <h3>200</h3>
    </li>
    <li>
      <p>处理任务</p>
      <h3>200</h3>
    </li>
    <li>
      <p>处理工单</p>
      <h3>200</h3>
    </li>
   </ul>
 
  </div>
  <div class="Performance_targets">
  <div class="echarts_top">
    <span class="echarts_name">系统公告</span>
<div class="select_optionsQ">
  <el-button class="btn">+写新报告</el-button>
    <el-button class="btn">查看更多&gt;</el-button>
</div>

   
  </div>
 <ul class="system_list">
<ul>
  <li>
    <p><span>【内部分享】</span>如何建立良好的客户关系</p>
    <span>2019-04-10 09:00</span>
  </li>
  <li>
    <p><span>【内部分享】</span>如何建立良好的客户关系</p>
    <span>2019-04-10 09:00</span>
  </li>
  <li>
    <p><span>【内部分享】</span>如何建立良好的客户关系</p>
    <span>2019-04-10 09:00</span>
  </li>
  <li>
    <p><span>【内部分享】</span>如何建立良好的客户关系</p>
    <span>2019-04-10 09:00</span>
  </li>
  <li>
    <p><span>【内部分享】</span>如何建立良好的客户关系</p>
    <span>2019-04-10 09:00</span>
  </li>
  <li>
    <p><span>【内部分享】</span>如何建立良好的客户关系</p>
    <span>2019-04-10 09:00</span>
  </li>
  <li>
    <p><span>【内部分享】</span>如何建立良好的客户关系</p>
    <span>2019-04-10 09:00</span>
  </li>
</ul>
 </ul>
  </div>

  <div class="Performance_targets">
  <div class="echarts_top">
    <span class="echarts_name">业绩目标</span>
   <div class="select_options">
    <el-select
      v-model="value"
      placeholder="公司目标"
      style="width: 160px;height: 30px"
     
    >
      <el-option
        v-for="item in options"
        :key="item.value"
        :label="item.label"
        :value="item.value"
        style="width: 160px;height:20px"
      />
    </el-select>
    

    <div class="block">
      <span class="demonstration"></span>
      <el-date-picker
        v-model="value1"
        type="datetime"
        placeholder="2019-05"
        style="width: 160px;height: 30px"
      />
    </div>
   </div>

   
  </div>
  <BigPie></BigPie>
  <p class="name_tit" id="small_tit">目标金额</p>
  <p class="name_tit" id="big_tit">¥1,000,000.00</p>
  <p class="name_tit"  id="small_tit">完成金额</p>
  <p class="name_tit" id="big_tit">¥400,000.00</p>
  </div>
  <div class="Performance_targets">
  <div class="echarts_top">
    <span class="echarts_name">业绩排行</span>
   <div class="select_options">
    <el-select
      v-model="value2"
      placeholder="个人排行"
      style="width: 160px;height: 30px"
     
    >
      <el-option
        v-for="item in options"
        :key="item.value"
        :label="item.label"
        :value="item.value"
        style="width: 160px;height:20px"
      />
    </el-select>
    <div class="block">
      <span class="demonstration"></span>
      <el-date-picker
        v-model="value1"
        type="datetime"
        placeholder="2019-05"
        style="width: 160px;height: 30px"
      />
    </div>
   </div>
  </div>
  <BigHistorgram></BigHistorgram>
  </div>
  <div class="Performance_targets">
  <div class="echarts_top">
    <span class="echarts_name">销售预测</span>
   <div class="select_options1">
    <el-select
      v-model="value3"
      placeholder="公司预测"
      style="width: 160px;height: 30px"
     
    >
      <el-option
        v-for="item in options"
        :key="item.value"
        :label="item.label"
        :value="item.value"
        style="width: 160px;height:20px"
      />
    </el-select>
  
   </div>
  </div>
  <BigHistorgramTwo></BigHistorgramTwo>

  </div>
  <div class="Performance_targets">
  <div class="echarts_top">
    <span class="echarts_name">业绩排行</span>
   <div class="select_options">
    <el-select
      v-model="value4"
      placeholder="公司数据"
      style="width: 160px;height: 30px"
    >
      <el-option
        v-for="item in options"
        :key="item.value"
        :label="item.label"
        :value="item.value"
        style="width: 160px;height:20px"
      />
    </el-select>
    <div class="block">
      <span class="demonstration"></span>
      <el-date-picker
        v-model="value1"
        type="datetime"
        placeholder="2019-05"
        style="width: 160px;height: 30px"
      />
    </div>
   </div>
  </div>
 <Funnel></Funnel>
<div class="funnel_bottom">
  <p class="funnel_tit"><span></span>初步洽谈&nbsp;500</p>
 <p class="funnel_tit"><span></span>深入沟通&nbsp;350</p>
 <p class="funnel_tit"><span></span>产品报价&nbsp;250</p>
 <p class="funnel_tit"><span></span>成交商机150</p>
 <p class="funnel_tit"><span></span>流失商机&nbsp;120</p>
</div>
  </div>
  <div class="Performance_targets">
  <div class="echarts_top">
    <span class="echarts_name">工作报告</span>
   <div class="select_options">
    <el-select
      v-model="value6"
      placeholder="提交给我的"
      style="width:200px;height: 30px"
     
    >
      <el-option
        v-for="item in options"
        :key="item.value"
        :label="item.label"
        :value="item.value"
        style="width: 160px;height:20px"
      />
    </el-select>
    <el-button class="btn">+写新报告</el-button>
    <el-button class="btn">查看更多&gt;</el-button>
   </div>
  </div>
  <el-table :data="tableData" stripe style="width: 100%" >
    <el-table-column prop="date" width="180"     />
    <el-table-column prop="name"  width="180"    />
    <el-table-column prop="address"   />
    <el-table-column prop="more"    />
  </el-table>
  </div>
  <div class="Performance_targets">
  <div class="echarts_top">
    <span class="echarts_name">日程日历</span>
   <div class="select_options">
    <el-select
      v-model="value5"
      placeholder="我的日程"
      style="width: 160px;height: 30px"
     
    >
      <el-option
        v-for="item in options"
        :key="item.value"
        :label="item.label"
        :value="item.value"
        style="width: 160px;height:20px"
      />
    </el-select>
    <el-button class="btn">+新建日程</el-button>
    <el-button class="btn">日程管理&gt;</el-button>
   </div>
  </div>
  <Calendar></Calendar>
  </div>

</div>

  </div>
</template>

<script setup lang="ts">
import Histogram from '@/components/histogram.vue';
import River from "../../components/river.vue"
import Pie from "../../components/Pie.vue"
import BigPie from "../../components/Big_pie_chart.vue"
import BigHistorgram from "../../components/big_histogram.vue"
import  BigHistorgramTwo from "../../components/Big_historgram.vue_two.vue"
import Funnel from "../../components/funnel.vue"
import Calendar from "../../components/Calendar.vue"
import { ref } from 'vue'

const value = ref('')



const value1 = ref('')
const value2 = ref('')
const value3 = ref('')
const value4 = ref('')
const value5 = ref('')
const value6 = ref('')
const value7 = ref('')
const value8 = ref('')





const tableData = [
  {
    date: '2019-04-02工作报告',
    name: '赵小刚',
    address: '未批阅',
    more:'详情'
  },
  {
    date: '2019-04-02工作报告',
    name: '赵小刚',
    address: '未批阅',
    more:'详情'
  },
  {
    date: '2019-04-02工作报告',
    name: '赵小刚',
    address: '未批阅',
    more:'详情'
  },
  {
    date: '2019-04-02工作报告',
    name: '赵小刚',
    address: '未批阅',
    more:'详情'
  },
  {
    date: '2019-04-02工作报告',
    name: '赵小刚',
    address: '未批阅',
    more:'详情'
  },
  {
    date: '2019-04-02工作报告',
    name: '赵小刚',
    address: '未批阅',
    more:'详情'
  }, {
    date: '2019-04-02工作报告',
    name: '赵小刚',
    address: '未批阅',
    more:'详情'
  }, {
    date: '2019-04-02工作报告',
    name: '赵小刚',
    address: '未批阅',
    more:'详情'
  }
]



const defaultTime = new Date(2000, 1, 1, 12, 0, 0)

const shortcuts = [
  {
    text: 'Today',
    value: new Date(),
  },
  {
    text: 'Yesterday',
    value: () => {
      const date = new Date()
      date.setTime(date.getTime() - 3600 * 1000 * 24)
      return date
    },
  },
  {
    text: 'A week ago',
    value: () => {
      const date = new Date()
      date.setTime(date.getTime() - 3600 * 1000 * 24 * 7)
      return date
    },
  },
]


const options = [
  {
    value: 'Option1',
    label: 'Option1',
  },
  {
    value: 'Option2',
    label: 'Option2',
  },
  {
    value: 'Option3',
    label: 'Option3',
  },
  {
    value: 'Option4',
    label: 'Option4',
  },
  {
    value: 'Option5',
    label: 'Option5',
  },
]
</script>

<style scoped>
.box{
  background-color: white;
}
.Ads{
  color: #999999;
  text-align: center;
  
}
.iconfont_list>ul{
  display: flex;
  width: 1400px;
  height: 100%;
  align-items: center;
  justify-content: space-evenly;
  /* background-color: saddlebrown; */
  /* background-color:green; */
}
.iconfont_list>ul>li{
  width: 118px;
  height: 80px;
  /* background-color: red; */
}
.iconfont{
 font-size: 48px;
text-align: center;
margin-left: 30px;
}
.iconfont_name{
  font-weight: bold;
 display: inline-block;
 background-color: #f0f2f5;
 width: 1400px;
 height: 50px;
 text-align: center;
line-height: 60px;
}
.iconfont_list_top{
  height: 60px;
  width: 100%;
  background-color: rgb(249, 249, 249);
}
.iconfont_list{
width: 180px;
height: 170px;
background-color: white;
margin-top: 30px;
}
.system_list>ul>li>span{
  color: #999999;
}
.system_list>ul>li>p>span{
  font-weight: bold;
}
.system_list>ul>li{
  display: flex;
  justify-content: space-between;
  align-items: center;
width: 97%;
height: 46px;
margin: 0 auto;
background-color: white;
margin-top: 2px;
}
.data_list{
  display: flex;
  flex-wrap: wrap;
}
.data_list>li>h3{
  font-size: 28px;
}
.data_list>li>p{
  color: #999999;
  font-size: 14px;
 line-height: 70px;
}
.data_list>li{
  width: 135px;
  height: 165px;
  /* background-color: red; */
  margin: 1px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.btn{
  margin-left: 20px;
  color: black;
}
.funnel_bottom{
  margin-top: 40px;
  float: right;
  margin-right: 35px;
}
.funnel_tit{
  font-size: 12px;
  margin-top: 33px;
}
.funnel_tit>span{
  display: inline-block;
  width: 8px;
  height: 2px;
  background-color: rgb(236, 236, 236);
}
#big_tit{
  color: #666666;
  font-size: 20px;
}
#small_tit{
  color: #999999;
}
.name_tit{
  height: 30px;
margin-top: 30px;
}
.select_options{
  width:340px;
  display: flex;
  justify-content: space-between;
  margin-right: 20px;
}
.select_options1{
display: flex;
margin-right: 20px;
}
.echarts_name{
  font-weight: bold;
  margin-left: 30px;
  align-items: center;
  /* width: 1400px; */
}
.echarts_top{
  /* width: 100%; */
  height: 60px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: rgb(249, 249, 249);
}
.big_box{
  display: flex;
  flex-wrap: wrap;
}
.Performance_targets{
  width: 650px;
  height: 400px;
  background-color: white;
  margin: 20px;
}
#asd{
  margin-top: 20px;
}
.demo-progress .el-progress--line {
  margin-bottom: 15px;
  max-width: 600px;
  margin-top: 30px;
}
.lv{
display: flex;
justify-content: space-between;
color: gray;
margin-top: 50px;
}
*{
  padding:0;
  margin:0;
  list-style-type: none;
}
.list{
  display: flex;
  margin-top: 20px;
}
.list>li{
  width: 300px;
  height: 160px;
  background-color:white;
  border-radius: 12px;
  margin-left: 15px;
}
.list>li>p{
  margin-left: 20px;
}
.littleTit{
 color: gray;
 margin-top: 5px;
}
.bigTit{
  font-weight: bold;
  font-size: 32px;
  margin-top: 10px;
}
</style>